<template>
	<view class="container">
		<view class='nav'>
			<view :class='current==0?"font-color":""' class="nav_unit" id='0' v-on:click="select_nav">省份</view>
			<view :class='current==1?"font-color":""' class="nav_unit" id='1' v-on:click="select_nav">城市</view>
			<view :class='current==2?"font-color":""' class="nav_unit" id='2' v-on:click="select_nav">区县</view>
		</view>
		<view class="content" v-show="current==0">
			<block v-for="(item,index) in result[0]" :key="index">
				<view :class="item.checked==0?'unit':'unit_ed'" :id="item.a_id" v-on:click="select_unit">{{item.district}}</view>
			</block>
		</view>
		<view class="content" v-show="current==1">
			<block v-for="(item,index) in result[1]" :key="index">
				<view :class="item.checked==0?'unit':'unit_ed'" :id="item.a_id" v-on:click="select_unit">{{item.district}}</view>
			</block>
		</view>
		<view class="content" v-show="current==2">
			<block v-for="(item,index) in result[2]" :key="index">
				<view :class="item.checked==0?'unit':'unit_ed'" :id="item.a_id" v-on:click="select_unit">{{item.district}}</view>
			</block>
		</view>
		<view class="selected">
			当前选择：<text v-for="(value,key) in regin" :key="key">{{value.district}}</text>
		</view>
		<view class="button" v-on:click="select_submit">确定选择</view>
	</view>
</template>
<style>
	page{background:#FFFFFF !important;}
	.container{width:96%;padding:10upx 2%;background: #F1F1F1;}
	.nav{width:100%;height: 80upx;background-color:#FFFFFF; display: flex;align-items: center;justify-content: flex-start;flex-wrap: nowrap;}
	.nav_unit{width: 20%;height: 80upx;line-height: 80upx;  font-size: 28upx;text-align: center;}
	.font-color{color: #3de9c7;border-bottom:2px solid #3de9c7;}
	
	.title{width:96%;padding:0 2%;height: 60upx;line-height: 60upx;font-size: 29upx;background: #3de9c7;color:#FFFFFF;text-align: left;}
	.content{width:96%;padding:20upx 2%;display: flex;justify-content: flex-start;flex-wrap: wrap;align-items: flex-start;background: #FFFFFF;}
	.unit{padding:10upx 15upx;font-size: 24upx;border-radius: 10upx;margin: 10upx;background: #F1F1F1; color:#333333;}
	.unit_ed{padding:10upx 15upx;font-size: 24upx;border-radius: 10upx;margin: 10upx;border:1px solid #3de9c7; color:#3de9c7;}
	.button{width:96%;margin:10upx 2%;text-align: center;height: 100upx;line-height: 100upx;font-size: 30upx;border-radius: 10upx;
	background-image: linear-gradient(#43eac9, #24c3a4);color: #FFFFFF;position: fixed;bottom: 0;left: 0;}
	.button text{padding-left: 20upx;}
	.selected{width:92%;padding:0 2%;margin:20upx 2%;line-height: 70upx;font-size: 26upx;background: #FFFFFF;color: #3de9c7;border-radius: 10upx;}
	.selected text{padding-left:20upx ;}
</style>
<script>
	export default {
		data() {
			return {
				current:0,
				height: '',
				width:'',
				result:[[],[],[]],
				regin:[],
				province:'',
				city:'',
				type:'',
				url: getApp().globalData.url,
				img_url:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.city = uni.getStorageSync("city");
			this.province = uni.getStorageSync("province");
			this.type = e.type;
			this.initialize();
		},
		methods: {
			initialize:function()
			{
				var that = this;
				uni.request({
					url: that.url+'/wechat_get_district', 
					data: {upid:9},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						for(var k=0;k<res.data.result.length;k++)
						{
							that.result[0].push(res.data.result[k]);
						}
					}
				})
			},
			select_nav:function(e)
			{
				var current = e.currentTarget.id;
				this.current = parseInt(current);
			},
			select_unit:function(e)
			{
				if(isNaN(e))
				{
					var a_id = e.currentTarget.id;
				}
				else
				{
					var a_id = e;
				}
				var length = this.result[this.current].length;
				for(var i=0;i<length;i++)
				{
					this.result[this.current][i].checked = 0;
					if(this.result[this.current][i].a_id==a_id)
					{
						this.result[this.current][i].checked = 1;
						var tmp = {};
						tmp.a_id = this.result[this.current][i].a_id;
						tmp.district = this.result[this.current][i].district;
						this.regin[this.current] = tmp;
					}
				}
				
				var current = this.current+1;
				if(current<3)
				{
					this.current++;
					var num = current;
					for(num = current;num<3;num++)
					{
						this.result[num].splice(0,this.result[num].length);
						this.regin.splice(num,this.regin.length);
					}
					
					var that = this;
					uni.request({
						url: that.url+'/wechat_get_district', 
						data: {upid:a_id,current:current},
						header: {'Content-Type': 'application/json'},
						success: (res) => {
							if(res.data.status==1)
							{
								for(var i=0;i<res.data.result.length;i++)
								{
									that.result[current].push(res.data.result[i]);
								}
							}
						}
					})
				}
				
			},
			select_submit:function()
			{
				// console.log(this.regin);
				var regin = '';
				var a_id = 0;
				if(this.regin.length==3)
				{
					for(var i=0;i<this.regin.length;i++)
					{
						regin += "-"+ this.regin[i].district;
					}
					console.log(regin);
					uni.setStorageSync("regin",regin.substr(1));
					uni.setStorageSync("a_id",this.regin[2].a_id);
					uni.navigateBack();
				}
				else if(this.regin.length==2)
				{
					if(this.regin[0].district=="北京市" || this.regin[0].district=="天津市" || this.regin[0].district=="上海市" || this.regin[0].district=="重庆市")
					{
						for(var i=0;i<this.regin.length;i++)
						{
							regin += "-"+ this.regin[i].district;
						}
						console.log(regin);
						uni.setStorageSync("regin",regin.substr(1));
						uni.setStorageSync("a_id",this.regin[1].a_id);
						uni.navigateBack();
					}
				}
			}
		}
	}
</script>
